<template>
  <div style="width: 100%">
    <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true">
      <bm-marker :position="{lng: 120.25878384227, lat: 30.241954566938}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" @click="dianji">
      </bm-marker>
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
    </baidu-map>
  </div>
</template>

<script>
export default {
  data () {
    return {
      center: {lng: 0, lat: 0},
      zoom: 3
    }
  },

  created () {

  },

  methods: {
    handler ({BMap, map}) {
      // console.log(BMap, map)
      this.center.lng = 120.25207471163941
      this.center.lat = 30.235457306833762
      this.zoom = 7
    },
    dianji() {
      console.log('哈哈哈');
    }
  }
}
</script>

<style scoped lang='scss'>
  .bm-view {
  // margin-top: 30px;
  width: 100%;
  height: 350px;
  }
</style>
